<template>
    <div id="gongyingshangList">
        <div class="breadcrumb ">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>
                <el-tag>供应商管理</el-tag>
            </el-breadcrumb-item>
             <el-breadcrumb-item>
                <el-tag>供应商列表</el-tag>
              </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="list">
             <el-table
                :data="tableData.filter(data => !search || data.gname.toLowerCase().includes(search.toLowerCase()))"
                borde
                style="width: 100%"
                height="550">
                <el-table-column
                  label="供应商"
                  prop="gname"
                  width='150'>
                </el-table-column>

                <el-table-column
                  label="手机号码"
                  prop="phone">
                </el-table-column>

                <el-table-column
                  label="邮箱"
                  prop="email">
                </el-table-column>

                <el-table-column
                  label="地址"
                  prop="dizhi">
                </el-table-column>

                <el-table-column
                  align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input
                      v-model="search"
                      size="mini"
                      placeholder="输入关键字搜索"/>
                  </template>
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handleEdit(scope.row.gid)">修改信息</el-button>
                  </template>
                </el-table-column>

              </el-table>
        </div>
    </div>

</template>
<script>
    import { getGongyingshang,gongyingshangDelete} from './../../../service/api/index.js'
     export default{
       name:"GoodsList",
            data() {
              return {
                  tableData: [],
                     search: ''
              }
            },
            
           
            
          
   
            mounted(){
               
            },
            


            created(){
                 //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                      getGongyingshang().then((response)=>{
                      console.log(response);
                      if (response.success) {
                         this.tableData = response.data;
                       }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch
            }, // ----created

            methods:{
                 async handleEdit($gid){
                     this.$router.push({name:'editGongyingshang',params:{gid:$gid}});
                  },

            }
     }
    
</script>
<style lang="less" scope>
   #gongyingshangList{
     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }

    .breadcrumb {
     margin-right: 0.2rem;
     margin-left: 0.2rem;
     margin-top: 0.1rem;
     margin-bottom: 0.1rem;
     background-color:white;
     padding: 0.06rem;
     height:0.6rem;
     border-radius: 4px
   }
    
    .list{
      margin-left: 2rem;
      margin-right: 2rem;
   }
</style>